<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- watcher看表达式 dep看属性层次 -->
    <!-- msg有两个表达式对应watcher1和watcher2两个watcher -->
    <!-- dep0 - [watcher1, watcher2] -->
    <!-- watcher1 dep0 -->
    {{msg}} 
    <!-- watcher2 dep0 -->
    <p v-text="msg"></p>
    
    <!-- dep1 - [watcher3] -->
    <!-- dep2 - [watcher3] -->
    <!-- watcher3 dep1 dep2 2层属性对应2个Dep -->
    <p v-text="person.name"></p>
    <button v-on:click="handleClick">更新</button>
  </div>
  <!-- <script src="./vue.js"></script> -->
  <script src="./mvvm/mvvm.js"></script>
  <script src="./mvvm/compile.js"></script>
  <script src="./mvvm/observer.js"></script>
  <script src="./mvvm/watcher.js"></script>
  <script>
    new MVVM({
      el: '#app',
      data: {
        msg: 'hello',
        person: {
          name: 'zhangsan'
        }
      },
      methods: {
        handleClick  () {
          this.msg = 'bye'
        }
      }
    })
  </script>
</body>
</html>